<template lang="html">
  <section class="stage">
    <ul class="cubes">
      <li class="cube" v-for="item in count">
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data () {
    return {
      count: 25
    }
  }
}
</script>
<style lang="scss" scoped>

// toogles
$spin: false;

// colors
$page-background: #fefefe;
$cube-colors: (#665867, #8c7491, #8c759f, #b37cb3, #b9e1ff, #baffc9, #bce8ff, #c587ad, #c9c9ff, #d192d1, #d2acd1, #e0f7d5, #e8bdff, #e8ffbd, #f1caff, #f5b8c7, #fbcdbd, #feeec7, #ffb3ba, #ffbcbd, #ffbde8, #ffdfba, #ffe8bc, #ffffb9, #ffffff);

// measurements
$scale: 1;

$wave-duration: 2s;
$wave-delay: 0.25s;

$cubes: length($cube-colors);
$cubes-per-row: 5;

$cube-gap: 2px * $scale;
$cube-size: 50px * $scale;

$cubes-container-width: ($cube-size * $cubes-per-row) + (($cube-gap * 2) * $cubes-per-row);

// functions
@function grayscale($n) {
  @return rgba(0, 0, 0, $n / 100);
}
@function dark($color, $amount) {
  @return darken($color, $amount);
}
@function toNum($str) {
  @return $str;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: $page-background;
}
.stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cubes {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: $cube-size * 2;
  width: $cubes-container-width;
  perspective: 1800px;
  transform-style: preserve-3d;
  transform: rotateX(50deg) rotateZ(28deg);

  @if $spin {
    animation: spin 20s ease-in-out infinite;
  }
}
.cube {
  position: relative;
  margin: $cube-gap;
  flex-shrink: 0;
  width: $cube-size;
  height: $cube-size;

  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform 0.5s ease-in-out;

  // for
  @for $i from 0 to $cubes {
    &:nth-child(#{$i+1}) {
      $color: #c587ad;
      $color: nth($cube-colors, round($i+1)); // 第二个参数为整数
      $row: floor($i / $cubes-per-row);

      animation: wave $wave-duration ($wave-delay * $row) ease-in-out infinite alternate;
      .front {
        background-color: dark($color, 2%);
        font-size: type-of(#{$i+1});
        line-height: toNum($i + 1);
      }
      .back {
        background-color: dark($color, 14%);
      }
      .top,
      .bottom,
      .left,
      .right {
        background: dark($color, 9%);
      }
    }
  }

  .front,
  .back,
  .top,
  .bottom,
  .left,
  .right {
    position: absolute;
  }
  .front {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ($cube-size / 2);
    background: grayscale(10);
  }
  .back {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ($cube-size / -2);
    background: grayscale(10);
  }
  .left {
    transform-origin: center center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) rotateY(90deg);
    background: grayscale(10);
  }
  .right {
    transform-origin: center center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(50%) rotateY(90deg);
    background: grayscale(10);
  }
  .top {
    transform-origin: center center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-50%) rotateX(90deg);
    background: grayscale(10);
  }
  .bottom {
    transform-origin: center center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(50%) rotateX(90deg);
    background: grayscale(10);
  }
}

@keyframes spin {
  from {
    transform: rotateX(50deg) rotateY(28deg) rotateZ(0);
  }
  to {
    transform: rotateX(720deg + 50deg) rotateY(720deg + 28deg) rotateZ(720deg);
  }
}

@keyframes wave {
  from {
    transform: translateZ(0);
  }
  to {
    transform: translateZ($cube-size * 2);
  }
}


</style>
